<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="手机号">
        <el-input v-model="searchObj.mobile" placeholder="手机号" />
      </el-form-item>

      <el-form-item label="用户类型">
        <el-select v-model="searchObj.userType" placeholder="请选择" clearable>
          <el-option label="投资人" value="1" />
          <el-option label="借款人" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="用户状态">
        <el-select v-model="searchObj.status" placeholder="请选择" clearable>
          <el-option label="正常" value="1" />
          <el-option label="锁定" value="0" />
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 列表 -->
    <el-table :data="list" border stripe>
      <el-table-column label="#" width="50">
        <template slot-scope="scope"> {{ (page - 1) * limit + scope.$index + 1 }}</template>
      </el-table-column>

      <el-table-column label="用户类型" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.userType === 1" type="success" size="mini"> 投资人</el-tag>
          <el-tag v-else-if="scope.row.userType === 2" type="warning" size="mini"> 借款人</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="name" label="用户姓名" />
      <el-table-column prop="idCard" label="身份证号" />
      <el-table-column prop="integral" label="用户积分" />
      <el-table-column prop="createdTime" label="注册时间" width="100" />

      <el-table-column label="绑定状态" width="90">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.bindStatus === 0" type="warning" size="mini"> 未绑定</el-tag>
          <el-tag v-else-if="scope.row.bindStatus === 1" type="success" size="mini"> 已绑定</el-tag>
          <el-tag v-else type="danger" size="mini">绑定失败</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="用户状态" width="90">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="danger" size="mini"> 锁定</el-tag>
          <el-tag v-else type="success" size="mini"> 正常</el-tag>
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 1" type="primary" size="mini" @click="lock(scope.row.id, 0)">锁定
          </el-button>

          <el-button v-else type="danger" size="mini" @click="lock(scope.row.id, 1)">解锁</el-button>

          <el-button type="primary" size="mini" @click="showLoginRecord(scope.row.id)"> 登录日志</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 用户登录日志 -->
    <el-dialog title="用户登录日志" :visible.sync="dialogTableVisible">
      <el-table :data="loginRecordList" border stripe>
        <el-table-column type="index" />
        <el-table-column prop="ip" label="IP" />
        <el-table-column prop="createdTime" label="登录时间" />
      </el-table>
    </el-dialog>

    <!-- 分页 -->
    <el-col :span="20" :xs="24" class="right-align">
      <pagination v-show="total > 0"
                  :total="total" :page.sync="searchObj.pageNum" :limit.sync="searchObj.pageSize"
                  @pagination="fetchData"
      />
    </el-col>
  </div>
</template>

<script>
import userInfoApi from '@/api/service/user-info'

export default {
  name: 'List',
  data() {
    return {
      list: null, // 数据列表
      page: 1, // 默认页码
      total: 0, // 数据库中的总记录数
      limit: 10, // 每页记录数
      searchObj: {
        pageNum: 1,
        pageSize: 10,
        mobile: null, // 手机号
        userType: null, // 用户类型
        status: null
      }, // 查询条件
      loginRecordList: [], // 会员登录日志
      dialogTableVisible: false // 对话框是否显示
    }
  },

  created() {
    // 当页面加载时获取数据
    this.fetchData()
  },

  methods: {
    fetchData() {
      userInfoApi
        .getPageList(this.searchObj)
        .then(res => {
          this.list = res.data.list
          this.total = res.data.total
        })
    },

    // 重置表单
    resetData() {
      this.searchObj = {
        pageNum: 1,
        pageSize: 10
      }
      this.fetchData()
    },

    // 锁定和解锁
    lock(id, status) {
      userInfoApi.lock(id, status).then(res => {
        this.$message.success(res.msg)
        this.fetchData()
      })
    },

    // 根据id查询会员日志记录
    showLoginRecord(id) {
      // 打开对话框
      this.dialogTableVisible = true
      // 加载数据列表
      userInfoApi.getuserLoginRecordTop50(id).then(res => {
        this.loginRecordList = res.data
      })
    }
  }

}
</script>

<style scoped>
.right-align {
  text-align: right;
}
</style>
